import React, { Component } from 'react';
import Pie from '@/components/Pie';
import url from '@/config/url';
import axios from '@/http/http'
class Welcome extends Component {
    state = {
        // 饼图数据
        accessFrom:[],
        area:[],
        gender:[]
    }
    render() {
        const {accessFrom,area,gender} = this.state
        return (
            <div id='main' style={{display: 'flex'}}>
                {/* 通过父子组件传参方式，将数据传给饼图组件 */}
                <Pie id='pie1' w='29%' h='500px' data={accessFrom} text='搜索引擎占比' legend={false} subtitle='搜索引擎'></Pie>
                <Pie id='pie2' w='29%' h='500px' data={area} text='区域分布占比' legend={true} subtitle='区域分布'></Pie>
                <Pie id='pie3' w='29%' h='500px' data={gender} text='男女性别占比' legend={true} subtitle='性别比例'></Pie>
            </div>
        );
    }
    componentDidMount(){
        axios.get(url.getpieData).then(res=>{
            console.log(res)
            this.setState({
                accessFrom: res.data.data.accessFrom,
                area:res.data.data.area,
                gender:res.data.data.gender,
            })
        }).catch(e=>{})
    }
    
}

export default Welcome;
